import React from 'react'
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
import { useFormik } from 'formik'
import Input from '@/components/input/input'
import * as Yup from 'yup'
import classNames from 'classnames'
export default function Login() {

    const formik = useFormik({
        initialValues: {
            phone: '',
            code: ''
        },
        //表单验证
        validationSchema: Yup.object().shape({
            phone: Yup.string()
                .required('请输入手机号')
                .matches(/^1[3456789]\d{9}$/, '手机号格式错误'),
            code: Yup.string()
                .required('请输入验证码')
                .matches(/^\d{6}$/, '验证码6个数字')
        }),
        onSubmit: (value) => {
            console.log(value)
        }
    })
    console.log(formik)
    const { values: { phone, code }, handleChange, handleSubmit,
        errors, touched,isValid
    } = formik
    console.log(isValid)
    return (
        <div className={styles.root}>
            {/* 导航条 */}
            <NavBar>登录</NavBar>
            <div className="content">
                {/* 标题 */}
                <h3>短信登录</h3>
                <form onSubmit={handleSubmit}>
                    {/* 手机号输入框 */}
                    <div className="input-item">
                        <div className="input-box">
                            <Input
                                className="input"
                                name="phone"
                                placeholder="请输入手机号"
                                // autoComplete="off"
                                value={phone}
                                onChange={handleChange}

                            />
                        </div>
                        {errors.phone && touched.phone && (
                            <div className="validate">{errors.phone}</div>
                        )}
                        {/* <div className="validate">手机号验证错误信息</div> */}
                    </div>

                    {/* 短信验证码输入框 */}
                    <div className="input-item">
                        <div className="input-box">
                            <Input
                                className="input"
                                name="code"
                                placeholder="请输入验证码"
                                maxLength={6}
                                value={code}
                                onChange={handleChange}
                            />
                            <div className="extra">获取验证码</div>
                        </div>
                        {/* <div className="validate">验证码验证错误信息</div> */}
                        {errors.code && touched.code && (
                            <div className="validate">{errors.code}</div>
                        )}
                    </div>

                    {/* 登录按钮 */}
                    <button type="submit" 
                    disabled={!isValid}
                    className={classNames('login-btn', !isValid ? 'disabled' : '')}
                    
                    
                    >
                        登录
                    </button>
                </form>
            </div>
        </div>
    )
}
